<template>
	<view class="demandsDetails">
		<view class="cards">

			<view class="labels">
				<text v-for="(item1s,index1s) in detailsData.cat" :key="index1s">{{item1s.name}}</text>
			</view>


			<view class="title">
				<text class="lb">
					需求编码：
				</text>
				<text class="text">{{detailsData.code}}</text>
			</view>
			<view class="title">
				<text class="lb">
					发布时间：
				</text>

				<text class="text">{{detailsData.create_time}}</text>
			</view>
			<view class="title">
				<text class="lb">
					服务时间：
				</text>
				<text class="text">{{detailsData.service_time}}</text>
			</view>
			<view class="title">
				<text class="lb">
					所在地区：
				</text>
				<view class="city">
					<text class="text2" v-if="detailsData.province_name">{{detailsData.province_name}}&nbsp;</text>
					<text class="text2" v-if="detailsData.city_name">{{detailsData.city_name}}&nbsp;</text>
					<text class="text2" v-if="detailsData.county_name">{{detailsData.county_name}}&nbsp;</text>
					<text class="text2" v-if="detailsData.address">{{detailsData.address}}</text>
				</view>
			</view>
			<view class="title">
				<text class="lb">备注：</text>
				<text class="text">{{detailsData.desc}}</text>
			</view>

		</view>
		<view class="list" v-if="detailsData.log?.length == 0">
			<text class="label">需求状态</text>
			<view class="nullData" style="width: 100%;">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
				<text>暂无需求状态</text>
			</view>
		</view>

		<view class="list" v-else>
			<text class="label">需求状态</text>

			<view class="line" v-for="(item,index) in  detailsData.log" :key="index">
				<view class="left">
					<text>{{item.type_text}}</text>
				</view>
				<view class="right">
					<view class="row">
						<text class="time">{{item.create_time}}</text>

						<!-- :1=发布,2=反馈,3=接单,4=支付,5=关联方案,6=设计验收,7=设计验收通过,8=施工进度,9=施工验收,10=施工验收通过,15=关闭  -->

						<!-- :1=发布,2=反馈,3=接单,4=支付, 7=设计验收通过,10=施工验收通过,-->
						<view class="desc"
							v-if="(item.type == 1 ||item.type == 2||item.type == 3||item.type == 4 ||item.type == 7 ||item.type == 10)&& item.desc">
							{{item.desc}}
						</view>
						<!-- 关联方案 -->
						<view class="tag" v-if="item.type == 5" @click="preview(item.relation_enid)">已关联设计方案</view>

						<!-- 设计验收 按钮-->
						<view class="tag" v-if="item.type == 6" @click="acceptance(item.relation_enid,item.check)">预览>
						</view>
<!-- @click="acceptancePost(item.demand_id,item.check)" -->
						<view class="tag" v-if="item.type == 6 && item.check==1"
							@click="acceptancePost(item)">验收>
						</view>


						<!-- 施工进度 ok-->
						<view class="tag" v-if="item.type == 8" @click="preveiwlog(item.relation_id,item.create_time)">
							查看施工进度</view>

						<!-- 施工验收 -->
						
						<view class="tag" v-if="item.type == 9" @click="constructionAcceptance(item.relation_id)">施工验收
						</view>


						<!-- 关闭需求 ok-->
						<view class="btn" v-if="item.type == 15" @click="offDemand(item.id)">关闭需求</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 查看 -->
		<up-popup :show="previewLogShow" @close="coloseLog" mode="center" :round="10" :closeable="true"
			:closeOnClickOverlay="false">
			<view class="formRow">
				<text class="label">施工记录</text>
				<view class="for">
					<view class="line" v-for="(item3,index3) in logDetails" :key="index3">
						<view class="left">
						</view>
						<view class="right">
							<view class="row">
								<text class="time">{{item3.create_time}}</text>
								<text class="time">{{item3.real_name}}</text>
								<view class="ImageArr rowBag">
									<text class="ImageArrLabel" v-if="item3.desc">{{item3.desc}}</text>
									<up-album :urls="item3.imgs" :previewFullImage="false"></up-album>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</up-popup>



	</view>
</template>


<script setup>
	import env from '@/api/config.js';
	import {
		details2,
		demand_close,
		build_log
	} from '@/api/require.js';
	import {
		ref,
		onMounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'



	const detailsData = ref({}) //详情数据

	const params = ref({
		id: '',
		page: 1,
		page_size: 2
	})

	// 查看的施工进度
	const logDetails = ref({})


	const previewLogShow = ref(false)

	onShow(() => {
		uni.$on('refreshIfNeeded', function(dat) {
			if (dat) {
				console.log('触发返回上一页刷新页面')
				queryDemandDetails()
			}
			uni.$off('refreshIfNeeded')
		})
	})


	onLoad((option) => {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		if (option.id) {
			params.value.id = option.id;
		}
	})

	onMounted(() => {
		queryDemandDetails()
	});

	const nullClick = () => {
		// wx.showToast({
		// 	title: '正在开发中！',
		// 	icon: 'none',
		// 	duration: 2000
		// });
	}
	// 需求详情
	const queryDemandDetails = async () => {
		const res = await details2({
			id: params.value.id
		});
		if (res.code === 1) {
			console.log(res.data)
			detailsData.value = res.data.demand
		}

	}




	// 已关联设计方案 预览 5
	const preview = async (id) => {
		const apiUrl = env.config;
		let domain = '';
		if (apiUrl.includes('-service')) {
		    // 测试
		    domain = 'dev-design.zhizhuangtong.com';  // dev 环境
		} else  {
		    domain = 'pre-design.zhizhuangtong.com';  // 正式环境
		} 
		// 动态构建 URL
		const url = `https://${domain}/#/share/${id}`;
		// console.log('urlurlurl',url)
		// const url = 'https://dev-design.zhizhuangtong.com/#/share/' + id
		
		uni.navigateTo({
			url: '/pages/webView/index?url=' + encodeURIComponent(url)
		});
	}

	// 设计验收  6
	const acceptance = async (id, check) => {
		// const url = 'https://dev-design.zhizhuangtong.com/#/share/' + id
		const apiUrl = env.config;
		let domain = '';
		if (apiUrl.includes('-service')) {
		    // 测试
		    domain = 'dev-design.zhizhuangtong.com';  // dev 环境
		} else  {
		    // 正式环境
		    domain = 'pre-design.zhizhuangtong.com';  // 正式环境
		} 
		
		// 动态构建 URL
		const url = `https://${domain}/#/share/${id}`;
		// console.log(url);
		uni.navigateTo({
			url: '/pages/webView/index?url=' + encodeURIComponent(url)
		});

	}

	// 模拟设计验收
	const acceptancePost = async (data) => {
		const cat = detailsData.value.cat[0]?.id
		uni.navigateTo({
			url: '/pages/demand/constructionAcceptance/index2?id=' + data.demand_id + '&check=' + data.check+ '&cat=' + cat
		});
	}




	// 查看施工进度 8 
	const preveiwlog = async (id, time) => {
		const datePart = time.split(' ')[0];
		const res = await build_log({
			project_id: id,
			day: datePart
		});
		if (res.code === 1) {
			console.log(res.data)
			logDetails.value = res.data.log
			previewLogShow.value = true
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}

	// 关闭查看记录 8 
	const coloseLog = () => {
		previewLogShow.value = false
	}


	// 施工验收
	const acceptinfoDetails = ref({})

	// 施工验收  9
	const constructionAcceptance = async (relation_id) => {
		uni.navigateTo({
			url: '/pages/demand/constructionAcceptance/index?id=' + relation_id
		});
	}


	// 关闭需求 15
	const offDemand = async (id) => {
		const res = await demand_close({
			id: id
		});
		if (res.code === 1) {
			console.log('关闭序曲', res.data)
			wx.showToast({
				title: '关闭需求成功！',
				icon: 'none',
				icon: 'success',
				duration: 1000
			});

			// listData.value = res.data.list
		} else {
			wx.showToast({
				title: res.data.msg,
				icon: 'none',
				icon: 'error',
				duration: 1000
			});

		}
		setTimeout(() => {
			queryDemandDetails()
		}, 1000)
	}



	//发送给朋友
	onShareAppMessage((res) => {
		console.log('发送给朋友发送给朋友', res)

		// if (userInfo.value) {
		// 	const url = '/pages/demandStatusDetails/index?id=' + params.value.id; //你的转发页面路径拼接参数
		// 	console.log('url', url)
		// 	return {
		// 		title: userInfo.value.user.real_name,
		// 		type: 0,
		// 		path: url,
		// 		// summary: casedetail.value.desc,
		// 		// imageUrl: casedetail.value.img
		// 	}
		// }
	})

	//分享到朋友圈
	onShareTimeline((res) => {
		console.log('分享到朋友圈')
		// if (userInfo.value) {
		// 	const url = '/pages/demandStatusDetails/index'; //你的转发页面路径拼接参数
		// 	console.log('url', url)
		// 	return {
		// 		title: userInfo.value.user.real_name,
		// 		type: 0,
		// 		path: url,
		// 		query: {
		// 			id: params.value.id
		// 		},
		// 		// summary: casedetail.value.desc,
		// 		// imageUrl: casedetail.value.img
		// 	}
		// }
	})
</script>

<style scoped lang="less">
	.demandsDetails {
		width: 100%;
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #FCFCFC;

		.cards {
			width: 100%;
			box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;

			.labels {
				display: flex;
				width: 100%;
				margin-bottom: 20rpx;

				text {
					margin-right: 20rpx;
					display: flex;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					height: 30rpx;
					color: #333333;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.tips {
				width: 100%;

				border-radius: 6rpx 6rpx 6rpx 6rpx;
				display: flex;
				align-items: center;
				padding: 10rpx;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 25rpx;

			}


			.title {
				margin-bottom: 15rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;

				.lb {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
					text-align: right;
					font-style: normal;
					text-transform: none;
					width: 150rpx;
					height: 100%;
					display: flex;
					align-items: flex-start;
				}

				.city {
					display: flex;

					flex: 1;
					flex-wrap: wrap;

					.text2 {
						display: flex;
						padding: 0 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						line-height: 36rpx;
						text-align: left;
						text-transform: none;
						height: 100%;
						display: flex;
						align-items: flex-start;
						word-break: break-all;
					}
				}

				.text {
					padding: 0 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
					text-align: left;
					text-transform: none;
					flex: 1;
					height: 100%;
					display: flex;
					align-items: flex-start;
					word-break: break-all;
				}


			}



		}

		.list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.label {
				width: 100%;
				display: block;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding: 45rpx 0 15rpx;
				margin-bottom: 20rpx;
			}

			.line {
				width: 100%;
				display: flex;

				.left {
					width: 130rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 36rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					border-right: 1rpx solid #C8C8C8;
					padding-top: 20rpx;
					padding-right: 20rpx;
					position: relative;
					padding-bottom: 30rpx;

					&::before {
						content: '';
						position: absolute;
						right: 0;
						top: 30rpx;
						transform: translateX(50%);
						width: 16rpx;
						height: 16rpx;
						border: 1rpx solid #FFFFFF;
						border-radius: 50%;
						background-color: #C8C8C8;
					}
				}

				.right {
					padding-bottom: 30rpx;
					padding-top: 20rpx;
					flex: 1;
					margin-left: 30rpx;
					display: flex;
					flex-wrap: wrap;

					.row {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						width: 100%;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding: 25rpx;
						background: #FFF6EF;
						box-sizing: border-box;

						.time {
							display: block;
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							width: 100%;
						}

						.desc {
							display: block;
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							width: 100%;
							margin-top: 20rpx;

						}

						.paystataus {
							display: block;
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #FA2E1B;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding: 10rpx 0;
							box-sizing: border-box;
						}

						.tag {
							display: block;
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #D5A969;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							padding: 10rpx 0;
							box-sizing: border-box;
						}

						.btn {
							margin-top: 20rpx;
							width: 130rpx;
							height: 55rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 1rpx solid #FA2E1B;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FA2E1B;
							line-height: 55rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}
					}
				}
			}


		}


		.line {
			width: 100%;
			display: flex;

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-right: 1rpx solid #C8C8C8;
				padding-top: 20rpx;
				padding-right: 20rpx;
				position: relative;
				padding-bottom: 30rpx;
				box-sizing: border-box;

				&::before {
					content: '';
					position: absolute;
					right: 0;
					top: 30rpx;
					width: 20rpx;
					height: 20rpx;
					transform: translateX(50%);
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 4rpx solid #D5A969;
					border-radius: 50%;
					background-color: #fff;
				}
			}

			.right {
				padding-top: 20rpx;
				padding-left: 30rpx;
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 60rpx);

				.row {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					width: 100%;
					box-sizing: border-box;

					.time {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						width: 100%;
						// margin-bottom: 20rpx;
					}

					.btnWrap {

						width: 100%;
						display: flex;
						justify-items: flex-start;

						.add {
							width: 180rpx !important;
							height: 65rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 65rpx;
							font-style: normal;
							text-transform: none;
							background: #D5A969;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}



					.rowBag {
						background: #F5F5F5;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						padding: 30rpx 25rpx;
						box-sizing: border-box;
						margin: 15rpx 0 40rpx;
					}

					.desc {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						width: 100%;
						margin-top: 20rpx;
						width: 100%;
						word-break: break-all;

					}

					.tagArr {
						width: 100%;
						display: flex;
						flex-wrap: wrap;


						.tag {
							width: 100%;
							margin-bottom: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #D5A969;
							text-align: left;
							font-style: normal;
							text-transform: none;
							box-sizing: border-box;
							word-break: break-all;

							&:last-child {
								margin-bottom: 0 !important;
							}
						}



					}

					.ImageArr {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.ImageArrLabel {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							width: 100%;
							word-break: break-all;

						}

						::v-deep .u-album {
							margin-top: 25rpx;
							width: 100%;

							.u-album__row__wrapper {}

							.u-album__row__wrapper {
								background-color: #C8C8C8;
								border-radius: 10rpx;
								overflow: hidden;
								width: 150rpx;
								height: 150rpx;

								image {
									width: 100% !important;
									height: 100% !important;
									object-fit: cover;
								}
							}
						}

						// image {
						// 	width: 100rpx;
						// 	height: 100rpx;
						// 	margin-right: 20rpx;
						// 	margin-bottom: 20rpx;
						// 	background-color: #C8C8C8;
						// 	border-radius: 20rpx;
						// 	overflow: hidden;

						// 	&:last-child {
						// 		margin-bottom: 0 !important;
						// 	}
						// }


					}


				}
			}
		}


		// 查看施工记录
		.formRow {
			width: 650rpx;

			::v-deep .u-safe-bottom {
				padding-bottom: 20rpx !important;
			}

			.label {
				width: 100%;
				display: block;
				padding-top: 43rpx;
				padding-bottom: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
				text-align: center;
				font-style: normal;
				text-transform: none
			}

			.for {
				height: 500rpx;
				padding: 40rpx 50rpx;
				overflow: auto;
				box-sizing: border-box;

			}

			.footer {
				display: flex;
				width: 100%;
				margin-top: 30rpx;
				justify-content: space-between;

				button {
					width: 270rpx !important;
					height: 88rpx !important;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					line-height: 88rpx;
					text-align: center;
					font-style: normal;
					border-radius: 14rpx;
				}

				.close {
					color: #333333;
					background: #F0F0F0;
				}

				.save {
					background: linear-gradient(95deg, #ECB86C 0%, #CC9F5F 100%);
					color: #FFFFFF;
				}
			}

		}

	}
</style>